<!--
 * @Author: liujixiang
 * @Date: 2020-07-30 10:46:25
 * @LastEditTime: 2020-09-25 16:20:33
 * @LastEditors: Please set LastEditors
 * @Description: 表格
 * @FilePath: \devops\VueElementUINew\src\components\QTable\index.vue
--> 

<template>
    <div class="q-table">
      <el-table
        :data="renderData"
        :height="option.height || 'auto'"
        v-loading="loading"
        :size="size"
        style="width: 100%">
        <el-table-column
          v-if="option.selection"
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          v-if="option.index"
          type="index">
        </el-table-column>
        <el-table-column
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :show-overflow-tooltip="column.showOverflowTooltip">
          <template slot-scope="scope">
            <el-tooltip
              :disabled="column.tooltip ? (typeof column.tooltip.disabled === 'function' ? column.tooltip.disabled(scope.row) : !!column.tooltip.disabled) : true"
              :content="column.tooltip ? (typeof column.tooltip.content === 'function' ? column.tooltip.content(scope.row) : column.tooltip.content) : ''"
              effect="dark"
              :placement="column.tooltip && column.tooltip.placement || 'top'"
            >
              <!-- 禁用选择模式 -->
              <span
                v-if="column.type && column.hasOwnProperty('disabled') && (typeof column.disabled === 'boolean' ? column.disabled : column.disabled(scope.row))"
                :style="{...column.commonStyle, ...displayValue(column.options, 'value', scope.row[column.prop], 'style'), cursor: column.command && column.command(scope.row) ? 'pointer' : 'auto'}"
                @click="handleOperate(column.command && column.command(scope.row), scope.row)"
              >{{ displayValue(column.options, 'value', scope.row[column.prop], 'label') }}<i
                v-if="typeof column.loading === 'function' ? column.loading(scope.row) : column.loading"
                class="el-icon-loading" /></span>
              <!-- 选择器 -->
              <el-select
                v-else-if="column.type === 'select'"
                size="mini"
                v-model="scope.row[column.prop]"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in column.options"
                  :key="index"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
              <!-- 下拉列表 -->
              <el-dropdown
                v-else-if="column.type === 'dropdown'"
                @command="(command) => scope.row[column.prop] = command"
                placement="bottom"
                trigger="click"
              >
                <span
                  class="el-dropdown-link"
                  :style="{...column.commonStyle, ...displayValue(column.options, 'value', scope.row[column.prop], 'style')}"
                >{{ displayValue(column.options, 'value', scope.row[column.prop], 'label') }}</span>
                <el-dropdown-menu class="q-table-dropdown-menu" slot="dropdown">
                  <el-dropdown-item
                    v-for="(item, index) in column.options"
                    :key="index"
                    :command="item.value"
                  >
                    <span :style="item.style">{{ item.label }}</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
              <!-- 选择用户 -->
              <div v-else-if="column.type === 'user'" class="cell-user">
                <user-select-popover
                  ref="userPopover"
                  trigger="click"
                  :user-list="userList"
                  @select-change="(id) => scope.row[column.prop] = id"
                >
                  <div>
                    <img :src="displayValue(userList, 'id', scope.row[column.prop], 'avatar')">
                    <span v-popover:userPopover>{{ displayValue(userList, 'id', scope.row[column.prop], 'name') }}</span>
                  </div>
                </user-select-popover>
              </div>
              <!-- 操作 -->
              <div v-else-if="column.type === 'operation'" class="cell-operation">
                <span
                  v-for="(item, index) in column.options.slice(0, column.displayNum || column.options.length)"
                  :key="index"
                  @click="handleOperate(item.value, scope.row)"
                  :style="{...column.commonStyle, ...item.style}"
                ><i :class="item.icon" />{{ item.label }}</span>
                <el-dropdown
                  v-if="column.displayNum && column.displayNum < column.options.length"
                  @command="(value) => handleOperate(value, scope.row)"
                >
                  <span class="el-dropdown-link" :style="column.commonStyle">
                    更多<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      :command="item.value"
                      v-for="(item, index) in column.options.slice(column.displayNum)"
                      :key="index"
                    >{{ item.label }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
              <!-- 时间格式化 -->
              <div v-else-if="column.timeFormat">
                {{ dayjs(scope.row[column.prop], column.timeFormat) }}
              </div>
              <!-- 默认展示 -->
              <div v-else>{{ column.formatter && column.formatter(scope.row) || scope.row[column.prop] }}<i
                v-if="typeof column.loading === 'function' ? column.loading(scope.row) : column.loading"
                class="el-icon-loading" /></div>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="pagination && !(pagination.hideOnSinglePage && pagination.currentPage == 1 && data.length <= pagination.pageSize)"
        :small="!!pagination.small"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pagination.currentPage"
        :page-sizes="pagination.pageSizes || [10, 15, 20, 25, 30]"
        :page-size.sync="pagination.pageSize"
        :layout="pagination.layout || 'total, sizes, prev, pager, next, jumper'"
        :total="pagination.total || data.length">
      </el-pagination>
    </div>
</template>
<script>
import UserSelectPopover from '@/components/UserSelectPopover'
import dayjs from 'dayjs'
export default {
    name: 'QTable',
    components: { UserSelectPopover },
    props: {
      columns: {
        type: Array,
        default: () => [{
          prop: 'sn',
          label: '编号'
        }, {
          prop: 'title',
          label: '标题'
        }, {
          prop: 'iteration',
          label: '迭代',
          type: 'select',
          disabled: false,
          options: [{
            label: '迭代一',
            value: 'diedai1'
          }, {
            label: '迭代二',
            value: 'diedai2'
          }, {
            label: '迭代三',
            value: 'diedai3'
          }]
        }, {
          prop: 'state',
          label: '状态',
          type: 'dropdown',
          disabled: false,
          options: [{
            label: '待处理',
            value: 'zhuangtai1',
            style: {
              color: '#820014',
              backgroundColor: '#FFE8E6'
            }
          }, {
            label: '研发中',
            value: 'zhuangtai2',
            style: {
              color: '#614700',
              backgroundColor: '#FFF8BD'
            }
          }, {
            label: '测试中',
            value: 'zhuangtai3',
            style: {
              color: '#003A8C',
              backgroundColor: '#D4EEFC'
            }
          }, {
            label: '待验收',
            value: 'zhuangtai4',
            style: {
              color: '#061178',
              backgroundColor: '#DEE8FC'
            }
          }, {
            label: '已完成',
            value: 'zhuangtai5',
            style: {
              color: '#135200',
              backgroundColor: '#E4F7D2'
            }
          }, {
            label: '已关闭',
            value: 'zhuangtai6',
            style: {
              color: '#595959',
              backgroundColor: '#E9E9E9'
            }
          }]
        }, {
          prop: 'createUser',
          label: '创建',
          type: 'user'
        }, {
          prop: 'executor',
          label: '指派',
          type: 'user'
        }, {
          prop: 'priority',
          label: '优先级',
          type: 'dropdown',
          disabled: false,
          options: [{
            label: '非常紧急',
            value: 'youxian1',
            style: {
              color: '#820014',
              backgroundColor: '#FFE8E6'
            }
          }, {
            label: '较高',
            value: 'youxian2',
            style: {
              color: '#614700',
              backgroundColor: '#FFF8BD'
            }
          }, {
            label: '普通',
            value: 'youxian3',
            style: {
              color: '#003A8C',
              backgroundColor: '#D4EEFC'
            }
          }, {
            label: '较低',
            value: 'youxian4',
            style: {
              color: '#135200',
              backgroundColor: '#E4F7D2'
            }
          }]
        }]
      },
      option: {
        type: Object,
        default: () => {
          return {
            selection: false,
            index: false,
            height: 'auto'
          }
        }
      },
      pagination: {
        type: Object,
        default: () => {
          return {
            remote: false,
            currentPage: 1,
            total: 0,
            layout: 'total, sizes, prev, pager, next, jumper',
            pageSizes: [10, 15, 20, 25, 30],
            pageSize: 10
          }
        }
      },
      data: {
        type: Array,
        default: () => [{
          sn: '9000001',
          title: '获取信号塔高度',
          iteration: 'diedai1',
          state: 'zhuangtai1',
          createUser: 'liuyi',
          executor: 'zhangsan',
          priority: 'youxian2'
        }, {
          sn: '9000002',
          title: '获取信号塔高度',
          iteration: 'diedai1',
          state: 'zhuangtai1',
          createUser: 'liuyi',
          executor: 'lisi',
          priority: 'youxian1'
        }, {
          sn: '9000003',
          title: '获取信号塔高度',
          iteration: 'diedai2',
          state: 'zhuangtai1',
          createUser: 'liuyi',
          executor: 'wangwu',
          priority: 'youxian2'
        }, {
          sn: '9000004',
          title: '获取信号塔高度',
          iteration: 'diedai3',
          state: 'zhuangtai1',
          createUser: 'liuyi',
          executor: 'zhaoliu',
          priority: 'youxian3'
        }, {
          sn: '9000005',
          title: '获取信号塔高度',
          iteration: 'diedai2',
          state: 'zhuangtai1',
          createUser: 'liuyi',
          executor: 'sunqi',
          priority: 'youxian3'
        }, {
          sn: '9000006',
          title: '获取信号塔高度',
          iteration: 'diedai1',
          state: 'zhuangtai1',
          createUser: 'liuyi',
          executor: 'zhouba',
          priority: 'youxian1'
        }],
        currentPage: 4,
        userList: [{
          id: 'liuyi',
          name: '刘一',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'chener',
          name: '陈二',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhangsan',
          name: '张三',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'lisi',
          name: '李四',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'wangwu',
          name: '王五',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhaoliu',
          name: '赵六',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'sunqi',
          name: '孙七',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhouba',
          name: '周八',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'wujiu',
          name: '吴九',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhengshi',
          name: '郑十',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }]
      },
      loading: {
        type: Boolean,
        default: false
      },
      size: {
        type: String,
        default: 'medium'
      }
    },
    data() {
      return {
        currentPage: 4,
        userList: [{
          id: 'liuyi',
          name: '刘一',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'chener',
          name: '陈二',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhangsan',
          name: '张三',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'lisi',
          name: '李四',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'wangwu',
          name: '王五',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhaoliu',
          name: '赵六',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'sunqi',
          name: '孙七',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhouba',
          name: '周八',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'wujiu',
          name: '吴九',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }, {
          id: 'zhengshi',
          name: '郑十',
          avatar: 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1019725746,2053024139&fm=26&gp=0.jpg'
        }]
      }
    },
    computed: {
      renderData() {
        const start = this.pagination.pageSize * (this.pagination.currentPage - 1)
        const end = this.pagination.pageSize * this.pagination.currentPage
        return this.pagination.remote ? this.data : this.data.slice(start, end)
      }
    },
    methods: {
      handleSizeChange(val) {
        this.$emit('size-change', val)
      },
      handleCurrentChange(val) {
        this.$emit('current-change', val)
      },
      displayValue(list, key, value, displayKey) {
        return list.find(v => v[key] === value) && list.find(v => v[key] === value)[displayKey] || ''
      },
      handleOperate(command, row) {
        console.log('command, row', command, row)
        if (command) {
          this.$emit('handle-operate', command, row)
        }
      },
      dayjs(time, format) {
        return time && dayjs(time).format(format) || ''
      }
    }
}
</script>

<style lang="scss">
.q-table {
  background-color: #FFFFFF;
  height: 100%;
  .el-table {
    /deep/.el-table__header {
      /deep/tr {
        background-color: #F9F9F9;
        /deep/th {
          border: none;
          background-color: #F9F9F9;
        }
      }
    }
    td {
      .cell {
        .el-icon-loading {
          margin-left: 4px;
        }
        .el-dropdown-link {
          cursor: pointer;
          font-size: 12px;
          padding: 5px;
        }
        &-user {
          .el-popover__reference {
            display: flex;
            align-items: center;
            cursor: pointer;
            img {
              height: 32px;
              width: 32px;
              border-radius: 50%;
            }
            span {
              margin-left: 10px;
            }
          }
        }
        &-operation {
          display: flex;
          align-items: center;
          justify-content: flex-start;
          span {
            display: inline-block;
            white-space: nowrap;
            padding: 0 4px;
          }
        }
      }
    }
  }
  /deep/.el-pagination {
    font-size: 12px;
    height: 50px;
    display: flex;
    align-items: center;
    line-height: 1;
    justify-content: flex-end;
    position: relative;
  }
  .el-pagination__total {
    position: absolute;
    left: 12px;
  }
  .el-pagination__sizes {
    position: absolute;
    left: 80px;
  }
}
.el-dropdown-menu.q-table-dropdown-menu {
  li.el-dropdown-menu__item {
    font-size: 12px;
    padding: 0 16px;
    span {
      padding: 5px;
    }
  }
}
</style>